<template>
  <div style="height:100%;margin-top: -10px;">
    <!--当前时间及天气-->
    <div style="background-color:#D1E9FF; padding: 10px 0 0 0;width:100%;z-index:100;">
      <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tq&skin=pitaya" frameborder="0" width="100%"
              height="25" allowtransparency="true"></iframe>
    </div>
    <div class="tabBox">
      <div>
        <!--<div class="leftDiv">-->
          <!--<ul class="leftNavList">-->
            <!--<li :class="index===0?'active':''" v-for="(item,index) in leftNavList" :key="index"-->
                <!--@click="clickLeftLi($event,index)">-->
              <!--<p class="lf">{{item}}</p>-->
              <!--<span class="rf dotSpan"></span>-->
            <!--</li>-->
          <!--</ul>-->
        <!--</div>-->
        <div class="rightDiv">
          <!--头部5个模块-->
          <div class="topModal clearFloat">
            <div v-for="(item,index) in topModalData" :key="index" class="lf">
              <p>{{item.name}}</p>
              <div>
                <span class="numSpan">{{item.num}}</span>
                <span class="unitSpan">{{item.unit}}</span>
              </div>
            </div>
          </div>
          <!--课程统计-->
          <div class="courseStatisticsDiv">
            <v-courseStatistics></v-courseStatistics>
          </div>
          <!--各类用户统计-->
          <div class="viewRankDiv">
            <v-viewRank></v-viewRank>
          </div>
          <!--视频播放量-->
          <div class="videoPlaybackVolumeDiv">
            <v-videoPlaybackVolume></v-videoPlaybackVolume>
          </div>
          <!--题目正确率-->
          <div class="titleAccuracyDiv">
            <v-titleAccuracy></v-titleAccuracy>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  /* eslint-disable */
  import { mapActions, mapGetters } from 'vuex'
  import $ from 'jquery'

  import courseStatistics from '../homePages/courseStatistics.vue'
  import viewRank from '../homePages/viewRank.vue'
  import videoPlaybackVolume from '../homePages/videoPlaybackVolume.vue'
  import titleAccuracy from '../homePages/titleAccuracy.vue'
  import {queryStatisticIndicator} from '@/api/system/user'

  export default {
    name: "Home",
    components: {
      "v-courseStatistics":courseStatistics,
      "v-viewRank":viewRank,
      "v-videoPlaybackVolume":videoPlaybackVolume,
      "v-titleAccuracy":titleAccuracy
    },
    data(){
      return{
        leftNavList:["课程统计","讲师观看量排行","视频播放量","题目正确率"],
        scrollHeight: [142, 675, 1324,1500],
        topModalData:[
          {name:"今日课程浏览量",num:"200",unit:"次"},
          {name:"全部课程浏览量",num:"46234",unit:"次"},
          {name:"课程观看时长",num:"46234",unit:"分钟"},
          {name:"课程完成率",num:"20",unit:"%"},
          {name:"考试合格率",num:"46",unit:"%"}
        ]
      }
    },
    computed: {
      ...mapGetters(['nickname', 'avatar','routers'])
    },
    mounted(){
      this.getList()
    },
    methods:{
      getList() {
        queryStatisticIndicator().then(res=> {
            if(res.code==200) {
                this.topModalData[0].num = res.data.todayCourseViews
                this.topModalData[1].num = res.data.allCourseViews
                this.topModalData[2].num = res.data.courseViewTime
                this.topModalData[3].num = res.data.courseCompleteRate
                this.topModalData[4].num = res.data.examPassRate
            }
        })
      }
    }
  }
</script>

<style lang="less" scoped>

  img {
    /*禁止元素选中*/
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*!*/
    -ms-user-select: none; /*IE10*!*/
    -khtml-user-select: none; /*早期浏览器*!*/
    user-select: none;
  }

  a,a:focus{text-decoration:none;color:#000;outline:none;}
  a:hover{color:#00a4ac;text-decoration:none;}
  /*index*/
  .mainindex {
    padding: 20px;
    overflow: hidden;
  }

  .welinfo {
    height: 32px;
    line-height: 32px;
    padding-bottom: 8px;
  }

  .welinfo span {
    float: left;
  }

  .welinfo b {
    padding-left: 8px;
  }

  .welinfo a {
    padding-left: 15px;
    color: #3186c8;
  }

  .welinfo a:hover {
    color: #F60;
  }

  .welinfo i {
    font-style: normal;
    padding-left: 8px;
  }

  .xline {
    border-bottom: solid 1px #dfe9ee;
    height: 5px;
  }

  .iconlist {
    padding-left: 40px;
    overflow: hidden;
  }

  .iconlist li {
    text-align: center;
    float: left;
    margin-right: 25px;
    margin-top: 25px;
  }

  .iconlist li p {
    line-height: 25px;
  }

  .ibox {
    clear: both;
    padding-left: 40px;
    padding-top: 18px;
    overflow: hidden;
    padding-bottom: 18px;
  }

  .ibtn {
    background: url(~@/assets/images/ibtnbg.png) repeat-x;
    border: solid 1px #bfcfe1;
    height: 23px;
    line-height: 23px;
    display: block;
    float: left;
    padding: 0 15px;
    cursor: pointer;
  }

  .ibtn img {
    margin-top: 5px;
    float: left;
    padding-right: 7px;
  }

  .box {
    height: 15px;
  }

  .infolist {
    padding-left: 40px;
    padding-bottom: 15px;
  }

  .infolist li {
    line-height: 23px;
    height: 23px;
    margin-bottom: 8px;
  }

  .infolist li span {
    float: left;
    display: block;
    margin-right: 10px;
  }

  .info {
    padding-left: 40px;
    background: url(~@/assets/images/search.png) no-repeat 10px 15px;
    padding-top: 15px;
    padding-bottom: 20px;
  }

  .umlist {
    padding-left: 40px;
  }

  .umlist li {
    float: left;
    background: url(~@/assets/images/ulist.png) no-repeat 0 5px;
    padding-left: 10px;
    margin-right: 15px;
  }


  .lf{
    float:left;
  }
  .rf{
    float:right;
  }
  .clearFloat:after{
    content:"";
    display:block;
    clear:both;
  }
  .tabBox{
    width:100%;
    padding:35px 0 0 0;
    background:#F7F8FA;
    box-sizing: border-box;
    >div{
      width:calc( 100% - 40px );
      height:100%;
      margin:0 auto;
    }
    /*.leftDiv {*/
      /*width: 180px;*/
      /*height: 243px;*/
      /*position: fixed;*/
      /*top: 132px;*/
      /*.leftNavList {*/
        /*width: 100%;*/
        /*height: 243px;*/
        /*position: relative;*/
        /*background:#fff;*/

        /*li {*/
          /*width: 100%;*/
          /*height: 60px;*/
          /*margin-bottom: 1px;*/
          /*cursor: pointer;*/
          /*position: relative;*/
          /*z-index: 2;*/

          /*p {*/
            /*width: 100%;*/
            /*height: 60px;*/
            /*line-height: 60px;*/
            /*text-align: left;*/
            /*padding-left:30px;*/
            /*box-sizing: border-box;*/
            /*color: #333;*/
            /*font-size: 18px;*/
            /*margin:0;*/
          /*}*/
        /*}*/

        /*li.active {*/
          /*background: #4496E2;*/

          /*p {*/
            /*font-size: 18px;*/
            /*color: #fff;*/
            /*font-weight: 400;*/
          /*}*/

          /*.dotSpan {*/
            /*display: none;*/
          /*}*/
        /*}*/
      /*}*/
    /*}*/

    .rightDiv{
      /*width:calc( 100% - 210px );*/
      width:100%;
      min-height:1000px;
      /*margin-left:210px;*/
      .courseStatisticsDiv,.viewRankDiv,.videoPlaybackVolumeDiv,.titleAccuracyDiv{
        width:100%;
        background: #FFFFFF;
        box-shadow: 0 0 12px 0 rgba(78, 99, 86, 0.2);
        margin-bottom:30px;
      }
      .topModal{
        width:100%;
        height: 112px;
        margin-bottom:30px;
        >div{
          width: calc( (100% - 80px)/5 );
          height: 112px;
          border-radius: 8px;
          padding:28px 0 0 20px;
          box-sizing: border-box;
          &:nth-child(1){
            background: linear-gradient(-30deg, #5390FF, #6DA1FF);
            margin-right:20px;
          }
          &:nth-child(2){
            background: linear-gradient(-30deg, #85D25B, #A6DA7B);
            margin-right:20px;
          }
          &:nth-child(3){
            background: linear-gradient(-30deg, #FFC236, #F8C550);
            margin-right:20px;
          }
          &:nth-child(4){
            background: linear-gradient(-30deg, #FF6E72, #EF868A);
            margin-right:20px;
          }
          &:nth-child(5){
            background: linear-gradient(-30deg, #1AA8CC, #4BBDEC);
          }
          p,.unitSpan{
            font-size: 16px;
            color: #FFFFFF;
            margin:0;
          }
          .numSpan{
            font-size: 30px;
            font-weight: bold;
            color: #FFFFFF;
            margin-right:10px;
          }
        }
      }
      .courseStatisticsDiv{
        height: 500px;
      }
      .viewRankDiv{
        height:622px;
      }
      .videoPlaybackVolumeDiv{
        height:500px;
      }
      .titleAccuracyDiv{
        height:306px;
        margin-bottom:120px;
      }
    }
  }
</style>